<template>
    <div class="categories">
        <el-button type="primary" plain @click="addtrue">添加分类</el-button>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="cat_id" border
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="cat_name" label="分类名称">
            </el-table-column>
            <el-table-column prop="cat_deleted" label="是否有效">
                <template slot-scope="scope">
                    <i class="el-icon-circle-check" style="color: green;"></i>
                </template>
            </el-table-column>
            <el-table-column label="排序">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.cat_level == 0">一级</el-tag>
                    <el-tag type="success" v-if="scope.row.cat_level == 1">二级</el-tag>
                    <el-tag type="warning" v-if="scope.row.cat_level == 2">三级</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="edit(scope.row,scope.$index)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row.cat_id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加编辑弹出层 -->
        <el-dialog :title="addmsg" :visible.sync="dialogVisibleadd" width="30%">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="ruleForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类" prop="cat_level" v-show="addmsg=='添加分类'">
                    <el-cascader @change="handleChange" v-model="value" :options="options"
                        :props="{ expandTrigger: 'hover', label: 'cat_name', value: 'cat_id' }" clearable></el-cascader>
                </el-form-item>
            </el-form>
            <!-- <span>这是一段信息</span> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleadd = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 分页 -->
        <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
                    :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>

    </div>
</template>

<script>
import { getcategories, getaddcategories, getdelcategories,geteditcategories } from "../utils/commodity"
export default {
    data() {
        return {
            rules: {
                cat_name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                ]
            },
            ruleForm: {
                cat_name: "",
            },
            value: "",
            options: [],
            addmsg: "",
            dialogVisibleadd: false,
            tableData: [],
            type: 0,
            pagenum: 1,
            pagesize: 10,
            total: 0,
            cat_pid: 0,
            leve: "",
            idx:-1,
            editId:0
        }
    },
    methods: {
        // 分类列表数据
        getDatacategories() {
            getcategories({ pagenum: this.pagenum, pagesize: this.pagesize }).then(res => {
                console.log(39, res);
                this.tableData = res.data
                this.total = res.data.length
            })
            getcategories({ pagenum: this.pagenum, pagesize: this.pagesize, type: 2 }).then(res => {
                console.log(39, res);
                this.options = res.data
            })
        },
        handleCurrentChange(val) {
            // console.log(val);
            this.pagenum = val
            this.getDatacategories()
        },
        handleSizeChange(val) {
            this.pagesize = val
            this.getDatacategories()
        },
        //级联选择器
        handleChange(val) {
            console.log(104, val);
            this.cat_pid = val[val.length - 1]
            this.leve = val.length
        },
        //添加添加模态框
        addtrue() {
            this.addmsg = "添加分类"
            this.dialogVisibleadd = true
            this.ruleForm={}
        },
        //添加
        add() {
            if(this.idx==-1){
                //添加
                getaddcategories({ cat_name: this.ruleForm.cat_name, cat_pid: this.cat_pid, cat_level: this.leve }).then(res => {
                // console.log(90, res);
                if (res.meta.status == 200) {
                        this.$message({
                            message: res.meta.msg,
                            type: 'success'
                        });
                    }
                this.dialogVisibleadd=false
                this.getDatacategories()
            })
            }else{//编辑
                geteditcategories({cat_name: this.ruleForm.cat_name,id: this.editId}).then(res=>{
                    console.log(res);
                    if (res.meta.status == 200) {
                        this.$message({
                            message: res.meta.msg,
                            type: 'success'
                        });
                    }
                    this.getDatacategories()
                    this.dialogVisibleadd=false
                    this.idx=-1
                })
            }
        },
        //删除
        del(id) {
            getdelcategories(id).then(res => {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.getDatacategories()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            })
        },
        //编辑回填
        edit(row,index){
            this.addmsg="编辑分类",
            this.ruleForm.cat_name=row.cat_name
            this.dialogVisibleadd=true
            this.idx=index
            this.editId=row.cat_id
        }
    },
    created() {
        this.getDatacategories()
    },
    mounted() {

    },
    components: {

    },
    computed: {

    },
    watch: {

    },
}
</script>

<style lang='scss' scoped>
.categories {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;
}
</style>
